<template>
    <div class="qht">
    <header>
      <hoomnavbar :active-index="2"/>
    </header>
    <main>
        <article class="banner-wrap">
            <div class="banner-pic-wrap">
                <img src="../../assets/imgs/product/mbmh/mbmh_banner_pic.jpg" alt="">
            </div>
            <div class="banner-tips animater-el" data-animater="animate__fadeInDown">
                <img src="../../assets/imgs/product/mbmh/banner_tips.png" alt="">
            </div>
        </article>
        <article class="introduce-wrap">
            <div class="introduce-bg">
                <img class="introduce-bg1" src="../../assets/imgs/product/product_bg1.png" alt="">
                <img class="introduce-bg2" src="../../assets/imgs/product/product_bg2.png" alt="">
            </div>
            <div class="introduce-container">
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/01.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_1.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>异业联盟，资源共享</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                商家与商家之间可以形成异业联盟，客户资源共享，利益分配标准化、流程化，轻松达到资源可持续变现的目的
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/02.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_2.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>免费入驻，简单便捷</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                零成本快速入驻美帮美汇平台，在平台上发布任意一个活动即可启用；厂家直供，低价购入、按需发货，避免压货！                            
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/03.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_3.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>玩转社交电商，解锁多种盈利方式</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                鼓励会员主动分享传播，吸引新用户，培养老用户的消费习惯，提升忠诚度，一次锁定会员多次盈利，提升商城复购率                            
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/04.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_4.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>合伙人模式，全民营销</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                将客户转化成门店最忠实的合伙人，商家可灵活制定推荐奖励佣金，提高客户分销积极性，开启“全民营销时代”！                            
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/05.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_5.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>分销模式，灵活管理</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                多触点推广，以点及面三层拓客，帮助您快速搭建完善的营销体系；分销订单、分销佣金等一键查看，轻松管理成千上万的代理商                            
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/mbmh/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/mbmh/06.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/mbmh/introduce_pic_6.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>更懂运营，精准营销</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                十余年行业经验积淀，更懂实体企业运营模式（线上+线下）， 提供后期持续深度运营服务，一对一教你如何做运营、搞营销！                            
                            </p>                     
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </main>
    <footer>
      <hoomfooter/>
    </footer>
    </div>
</template>
<script>
import Observer from '../../utils/observer.js'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'
export default {
    name: 'Home',
    components: {
        hoomnavbar,
        hoomfooter,
    },
    data(){
        return{
            observer:'',
        }
    },
    mounted(){
        const els2 = document.querySelectorAll('.animater-el')
        this.observer = Observer({
                els:els2,
                threshold:0.2
            },(el)=>{
                const classStr = el.dataset.animater.split(',');
                const delay = el.dataset.delay;
                if(delay) return setTimeout(()=>{
                    el.style.visibility = 'visible';
                    el.classList.add(classStr[0])
                },400)
                el.style.visibility = 'visible';
                el.classList.add(classStr[0])
            })
    },
    beforeDestroy(){
        this.observer && window.removeEventListener('scroll',this.observer)
    },
}
</script>
<style lang="less" scoped>
@import '../../assets/css/variable.less';
.banner-wrap{
    .banner-pic-wrap{
        height: 700 * @crem;
        position: relative;
        overflow: hidden;
        img{
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            // height: 100%;
            min-width: 90%;
            height: 100%;
            object-fit: cover;
        }
    }
    .banner-tips{
        margin-top: 40px;
        height: 132 * @crem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 85 * @crem;
        img{
            height: 100%;
        }
    }
}
.introduce-wrap{
    position: relative;
    padding-top: 154 * @crem;
    padding-bottom: 300 * @crem;
    .introduce-container{
        width: 1440 * @crem;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        // justify-content: space-between;
        justify-content: center;

    }
    .introduce-item{
        width: 655 * @crem;
        height: 815 * @crem;
        border-radius: 50 * @crem;
        position: relative;
        background-color: #fff;
        .bg-wrap{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50 * @crem;
            overflow: hidden;
            z-index: 0;
            .circle-bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;

            }
            .number-bg{
                position: absolute;
                top: 47 * @crem;
                right: 40 * @crem;
                width: 292 * @crem;
                height: 246 * @crem;
            }
        }
        .introduce-content{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50 * @crem;
            z-index: 5;
            

            .introduce-content-top{
                height: 512 * @crem;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 453 * @crem;
                    height: 404 * @crem;
                }
            }
            .introduce-content-bottom{
                box-sizing: border-box;
                padding-left: 107 * @crem;
                padding-right: 95 * @crem;
                .introduce-content-caption{
                    height: 88 * @crem;
                    line-height: 88 * @crem;
                    font-size: 44 * @crem;
                    color: #A66EDB;
                    font-weight: 500;
                    text-align: left;
                    white-space: nowrap;
                    border-bottom: 1px dashed #9155D4;
                }
                p{
                    margin-top: 21 * @crem;
                    color: #4E4E4E;
                    font-size: 24 * @crem;
                    line-height: 36 * @crem;
                    text-align: left;
                }
            }
        }
    }
    .introduce-item:nth-child(n+3){
        margin-top: 278 * @crem;
    }
    .introduce-item:nth-child(2n-1){
        margin-right: 130 * @crem;
    }
    .introduce-item:nth-child(3){
        .introduce-content-caption{
            font-size: 30 * @crem !important;
        }
    }
    .introduce-item::before{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 53 * @crem;
        left: -24 * @crem;
        border-radius: 50 * @crem;
        border: 1px dashed  #9155D4;
        z-index: -2;
        background: #fff;

    }
    .introduce-item:nth-child(1){
        .introduce-content-top img{
            // width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-item:nth-child(2){
        .introduce-content-top img{
            // width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-item:nth-child(4){
        .introduce-content-top img{
            // width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-item:nth-child(5){
        .introduce-content-top img{
            // width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-item:nth-child(6){
        .introduce-content-top img{
            // width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -5;
        .introduce-bg1{
            width: 100%;
            height: 1048 * @crem;
            margin-top: 386 * @crem;
        }
        .introduce-bg2{
            width: 100%;
            height: 1048 * @crem;
            margin-top: 614 * @crem;
        }
    }
}
    
</style>